<template>
    <Layout>
        <template #left-content>
            <div class="title-panel drag">设置</div>
            <div class="menu-list">
                <div :class="['menu-item', route.path == item.path ? 'menu-active' : '']"
                    v-for="(item, index) in settingMenuList" :key="index" @click="jump(item)">
                    <div :class="['iconfont', item.icon]" :style="{ background: item.bgColor }"></div>
                    <div class="menu-name"> {{ item.name }}</div>
                </div>
            </div>
        </template>
        <template #right-content>
            <!-- 用于拖动窗口的控件 -->
            <div class="title-panel drag"></div>
            <!-- 下面Component的写法和直接写 <router-view></router-view> 效果相同，只是下面的写法可以有更多功能，如使用keep-alive标签-->
            <router-view v-slot="{ Component }">
                <component :is="Component" ref="component"></component>
            </router-view>
        </template>
    </Layout>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const settingMenuList = ref([
    {
        name: "账号设置",
        icon: "icon-zhanghaoshezhi",
        path: "/setting/userInfo",
        bgColor: "#0c9f61"
    },
    {
        name: "文件管理",
        icon: "icon-wenjianguanli",
        path: "/setting/fileManage",
        bgColor: "#d9a178"
    },
    {
        name: "关于R-Chat",
        icon: "icon-guanyu",
        path: "/setting/about",
        bgColor: "#4f9cfe"
    },
])

const jump = (item) => {
    router.push(item.path);
}
</script>

<style lang="scss" scoped>
.title-panel {
    height: 60px;
    background: #f7f7f7;
    text-align: center;
    line-height: 60px;
    font-size: larger;
}

.menu-list {
    border-top: 1px solid #ddd;

    .menu-item {
        display: flex;
        align-items: center;
        padding: 10px;

        &:hover {
            cursor: pointer;
            background: #d6d6d6;
        }

        .iconfont {
            font-size: 20px;
            width: 35px;
            height: 35px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .menu-name {
            color: #000000;
            margin-left: 10px;
            flex: 1;
        }
    }

    .menu-active {
        background: #c4c4c4;

        &:hover {
            background: #c4c4c4;
        }
    }
}
</style>
